<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
    <meta name="generator" content="Hugo 0.88.1">
    <meta charset="UTF-8">
    <title>音乐歌单</title>
    <link rel="canonical" href="https://getbootstrap.com/docs/5.1/examples/album/">
    <link href="../static/font/bootstrap-icons.css" rel="stylesheet">
    <link href="../static/css/index.css" rel="stylesheet">
    <link href="../static/css/bootstrap_5.min.css" rel="stylesheet">
<!--    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">-->

    <link href="/font/bootstrap-icons.css" rel="stylesheet">
    <link href="/css/index.css" rel="stylesheet">
    <link href="/css/bootstrap_5.min.css" rel="stylesheet">
    <script src="/js/jquery-1.11.2.min.js"></script>
<!--    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">-->
    <script src="/js/VarGloba.js"></script>

    <!-- Bootstrap core CSS -->

    <style>
        .bd-placeholder-img {
            font-size: 1.125rem;
            text-anchor: middle;
            -webkit-user-select: none;
            -moz-user-select: none;
            user-select: none;
        }

        @media (min-width: 768px) {
            .bd-placeholder-img-lg {
                font-size: 3.5rem;
            }
        }
        .clearfix{
            width: 100%;
            margin-left: 5%;
        }
        section{
            background-image: url(https://img1.baidu.com/it/u=472493569,3582573794&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800);
            width: 100%;
            height:300px;
            margin-top: 10px
        }
    </style>
</head>
<body>
<div th:replace="../templates/nav :: nav"></div>
<section class="text-center container" style="">
    <div class="row py-lg-6">
        <div class="col-lg-12 col-md-8 mx-auto">
            <h1 class="fw-light">花火音乐</h1>
            <p class="lead text-muted">以纯净之声，交世界之友</p>
            <p class="lead text-muted">以空明之心，聆听宇宙的声音</p>
        </div>
        <div class="col-lg-12">
            <div style="width: 40%;height: 45px;border-radius: 80px;margin-left: 30%;margin-top: 10px">
                <div class="input-group">
                    <input type="text" class="form-control" id="musinListSearch" placeholder="输入歌单名">
                    <span class="input-group-btn">
                        <button class="btn btn-light" onclick="seatchLike()" type="button">搜索</button>
                    </span>
                </div>
            </div>
        </div>
    </div>
</section>
<div class="" style="width: 90%;margin-left: 5%">
    <div class="gedan" style="width: 100%">
        <div class="xiaodaohang">
            <div style="margin-top: 5px;height:65px;background-color: #0f0f0f">
                <br>
                <a class="xiaodaohnag1 front" href="javascript:void(0)" th:each="type1:${type}" th:text="${type1}" th:onclick="getMusicByType([[${type1}]])">华语男歌手</a>
                <br>
            </div>
            <main class="xiaodaohang">
                <div class="album py-5 bg-light">
                    <div class="container" id="musicListContent">
                        <div class="row row-cols-1 row-cols-sm-2 row-cols-md-4 g-6" id="ul">
                            <div class="col" th:each="musiclist:${Music.getList()}">
                                <a th:href="'/musiclistShow/'+${musiclist.getList_id()}">
                                    <div class="card shadow-sm" style="width: 320px;margin: 5px">
                                        <img th:src="${musiclist.getList_photourl()}" width="320" height="250">
                                        <p class="card-text" th:text="${musiclist.getList_name()}"></p>
                                        <div class="d-flex justify-content-between align-items-center">
                                            <small class="text-muted"><span style="font-size: 8px;color: #777;display: block;">播放量：<span th:text="${musiclist.getList_sum()}">640万</span></span></small>
                                        </div>
                                    </div>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </main>
        </div>
    </div>
    <div class="page" id="Page" style="margin-left: 45%;margin-top: 10px">
        <nav aria-label="Page navigation example">
            <ul class="pagination">
                <li class="page-item"><a class="page-link" th:href="'/musiclist/?pageNum='+${Music.pageNum-1}" th:unless="${Music.isFirstPage}">上一页</a></li>
                <th:block th:each="i :${#numbers.sequence(1, Music.pages)}">
                    <li class="page-item"><a class="page-link" th:href="'/musiclist/?pageNum='+${i}" th:text="${i}">1</a></li>
                </th:block>
                <li class="page-item"><a class="page-link" th:href="'/musiclist/?pageNum='+${Music.pageNum+1}" th:unless="${Music.isLastPage}">下一页</a></li>
            </ul>
        </nav>
    </div>
</div>

<script src="../static/js/bootstrap.bundle.min.js"></script>
<script src="/js/bootstrap.bundle.min.js"></script>
</body>
<script>
    function getMusicByType(type) {
        $('#ul').remove();
        $('#Page').remove();
        var ul = '<ul class="clearfix" id="ul"></ul>';
        $('#musicListContent').append(ul);
        var musicList = {
            "list_type":type
        };
        $.ajax({
            type:"post",
            url:BaseURL+"getMusicByType",
            dataType:"json",
            data:JSON.stringify(musicList),
            contentType : 'application/json',
            success:function (data) {
                console.log(data);
                var musicListData = data.data.list;
                for (var i=0;i<musicListData.length;i++){
                    var li = ' <div class="col" th:each="musiclist:${Music.getList()}">\n' +
                        '    <a href="/musiclistShow/'+musicList[i]["list_id"]+'">\n' +
                        '        <div class="card shadow-sm" style="width: 320px;margin: 5px">\n' +
                        '            <img src="'+musicList[i]["list_photourl"]+'" width="320" height="250">\n' +
                        '            <p class="card-text">'+musicList[i]["list_name"]+'</p>\n' +
                        '            <div class="d-flex justify-content-between align-items-center">\n' +
                        '                <small class="text-muted"><span style="font-size: 8px;color: #777;display: block;">播放量：<span>'+musicList[i]["list_sum"]+'</span></span></small>\n' +
                        '            </div>\n' +
                        '        </div>\n' +
                        '    </a>\n' +
                        '</div>';
                    $('#ul').append(li)
                }
            }
        })
    }
    function seatchLike() {
        var musinListSearch = $('#musinListSearch').val();
        if (musinListSearch == undefined || musinListSearch == ""){
            alert("请输入查询条件")
        } else {
            var musicList = {
                "list_name":musinListSearch
            };
            $.ajax({
                type:"post",
                url:BaseURL+"searchMusicList",
                dataType:"json",
                data:JSON.stringify(musicList),
                contentType : 'application/json',
                success:function (data){
                    console.log(data);
                    var musicList = data.data;
                    if(musicList.length == 0){
                        alert("没有查询到相关结果")
                    }else {
                        $('#ul').remove();
                        $('#Page').remove();
                        var ul = '<div class="row row-cols-1 row-cols-sm-2 row-cols-md-4 g-3" id="ul"></div>';
                        $('#musicListContent').append(ul);
                        for (var i=0;i<musicList.length;i++){
                            var li = ' <div class="col" th:each="musiclist:${Music.getList()}">\n' +
                                     '    <a href="/musiclistShow/'+musicList[i]["list_id"]+'">\n' +
                                     '        <div class="card shadow-sm" style="width: 320px;margin: 5px">\n' +
                                     '            <img src="'+musicList[i]["list_photourl"]+'" width="320" height="250">\n' +
                                     '            <p class="card-text">'+musicList[i]["list_name"]+'</p>\n' +
                                     '            <div class="d-flex justify-content-between align-items-center">\n' +
                                     '                <small class="text-muted"><span style="font-size: 8px;color: #777;display: block;">播放量：<span>'+musicList[i]["list_sum"]+'</span></span></small>\n' +
                                     '            </div>\n' +
                                     '        </div>\n' +
                                     '    </a>\n' +
                                     '</div>';
                            $('#ul').append(li)
                        }
                    }
                }
            })
        }

    }
</script>
</html>
